<template>
    <div style="margin:auto;">
        <el-select v-model="provinceValue" class="m-2" placeholder="选择所在省份" size="small" @change="provinceChanged(val)">
            <el-option v-for="area in province" :label="area.name" :key="area.areaId" :value="area.areaId" />
        </el-select><br><br>
        <el-select v-model="areaValue" class="m-2" placeholder="选择所在城市" size="small" @change="areaChanged()">
            <el-option v-for="area in areas" :label="area.name" :key="area.name" :value="area.name" />
        </el-select><br><br>
        <el-select v-model="collegeValue" class="m-2" placeholder="选择所在高校" size="small">
            <el-option v-for="item in college" :label="item.collegeName" :key="item.collegeId" :value="item.collegeId" />
        </el-select><br><br><br>
    </div>
    <div style="margin:auto;width:fit-content">
        <el-button type="success" @click="changeCollege(true)">确认</el-button>&nbsp;&nbsp;
        <el-button type="primary" @click="changeCollege(false)">切换为全国地区</el-button>&nbsp;&nbsp;
        <el-button type="warning" @click="changeAreaDialogControl(false)">取消</el-button>&nbsp;&nbsp;
    </div>
</template>

<script>
export default {
    props:{
        changeAreaDialogControl:Function
    },
    data() {
        return {
            province: [],
            areas: [],
            college: [],
            provinceValue: "",
            areaValue: "",
            collegeValue: "",
            collegeName:''
        }
    },
    created() {
        fetch("/api/location/province", { method: "get" }).then((resp) => {
            resp.json().then((data) => {
                this.province = data;
                this.provinceValue = 1;
                this.provinceChanged();
                this.areaChanged("北京市");
            });
        });
    },
    methods: {
        provinceChanged() {
            this.collegeValue=null
            this.college=null
            fetch("/api/location/area?parentId=" + this.provinceValue, {
                method: "get",
            }).then((resp) => {
                resp.json().then((data) => {
                    this.areas = data;
                    this.college = [];
                    this.areaValue = "";
                });
            });
        },
        areaChanged() {
            fetch("/api/location/college?area=" + this.areaValue, { method: "get" }).then(
                (resp) => {
                    resp.json().then((data) => {
                        this.college = data;
                        this.collegeValue = "";
                    });
                }
            );
        },
        changeCollege(flag){
            if(flag){
                this.$store.state.area.collegeId=this.collegeValue
            this.$store.state.area.collegeName=this.collegeName
            }else{
                this.$store.state.area.collegeId=0
                this.$store.state.area.collegeName='全国'
            }
            
            this.changeAreaDialogControl(false)
        },
    },
    watch:{
        collegeValue(){
            if(this.college==null)return
            this.college.forEach(obj=>{
                if(obj.collegeId==this.collegeValue){
                    this.collegeName=obj.collegeName
                    return
                }
            })
        }
    }
}
</script>

<style scoped>

</style>